<template>
  <div class="parent">
    Parent:{{ count }}
    <button @click="add">add</button>
    <hr />
    <Child1 :count="count" v-if="isShowChild"></Child1>
    <button @click="toggleIsShowChild">toggleIsShowChild</button>
    <hr/>
    <keep-alive>
        <component :is="componentName"></component>
    </keep-alive>
    <button @click="toggleComponentName">toggleComponentName</button>
  </div>
</template>
<script>
import {
  onBeforeMount,
  onMounted,
  ref,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    //Vue3
    const count = ref(0);
    const isShowChild = ref(true);
    const componentName = ref('Child1');
    console.log(`Vue3 Parent setup`);
    onBeforeMount(() => {
      console.log(`Vue3 Parent onBeforeMount`);
    });
    onMounted(() => {
      console.log(`Vue3 Parent onMounted`);
    });
    onBeforeUpdate(() => {
      console.log(`Vue3 Parent onBeforeUpdate`);
    });
    onUpdated(() => {
      console.log(`Vue3 Parent onUpdated`);
    });
    onBeforeUnmount(() => {
      console.log(`Vue3 Parent onBeforeUnmount`);
    });
    onUnmounted(() => {
      console.log(`Vue3 Parent onUnmounted`);
    });
    const add = () => count.value++;
    const toggleIsShowChild = () => (isShowChild.value = !isShowChild.value);
    const toggleComponentName = ()=>{
        componentName.value = componentName.value=='Child1'?'Child2':'Child1'
    }
    return {
      count,
      add,
      isShowChild,
      toggleIsShowChild,
      componentName,
      toggleComponentName
    };
  },
  beforeCreate() {
    console.log(`Vue2 Parent beforeCreate`);
  },
  created() {
    console.log(`Vue2 Parent created`);
  },
  beforeMount() {
    console.log(`Vue2 Parent beforeMount`);
  },
  mounted() {
    console.log(`Vue2 Parent mounted`);
  },
  beforeUpdate() {
    console.log(`Vue2 Parent beforeUpdate`);
  },
  updated() {
    console.log(`Vue2 Parent updated`);
  },
  beforeDestroy() {
    console.log(`Vue2 Parent beforeDestroy`);
  },
  destroyed() {
    console.log(`Vue2 Parent destroyed`);
  },
};
</script>
<style>
.parent {
  width: 200px;
  border: 5px solid red;
  padding: 5px;
}
</style>
